import React from 'react';
import {Row, Col, Tag, Button, Alert, Table, notification} from 'antd';
import {tableConfirm} from "../../services/showServer";
import {columnConfirm} from "../../services/showServer";

const openNotificationWithIcon = type => () => (
  notification[type]({
    message: 'Error',
    description: '状态确认失败，请稍后重试！',
  })
);

class TableInfoComtainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  getTime(ver) {
    if (ver) {
      var date = new Date(Number(ver));
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = date.getMinutes() + ':';
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    } else {
      return null;
    }
  }

  fileSize(size) {
    if (size) {
      var kb = 1024;
      var mb = kb * 1024;
      var gb = mb * 1024;

      if (size >= gb) {
        var f = (size / gb).toFixed(2);
        return f.toString() + "GB";
      } else if (size >= mb) {
        var f = (size / mb).toFixed(2);
        return f.toString() + "MB";
      } else if (size >= kb) {
        var f = (size / kb).toFixed(2);
        return f.toString() + "KB";
      } else
        return size.toString() + "B";
    } else {
      return "0B";
    }
  }

  okClick(record) {
    columnConfirm(record.id).then(function (res) {
      if (res.status == 200) {
        //刷新左侧树形结构
        this.props.signal.dispatch(this.props.table.id)
      } else {
        this.openNotificationWithIcon('error')
      }
    }.bind(this));
  }

  getColor(type) {
    //如果是表整体增删，忽略列的变化
    if (this.props.table.status == 31 || this.props.table.status == 32 || this.props.table.status == 33) {
      return {color: '#000000'};
    }
    if (type == 51) {
      return {color: '#87D068'};
    } else if (type == 52) {
      return {color: '#2DB7F5'};
    } else if (type == 53) {
      return {color: '#FF5500'};
    } else if (type == 62) {
      return {color: '#FFAA00'};
    } else {
      return {color: '#000000'};
    }
  }

  onConfirmClick() {
    tableConfirm(this.props.table.id).then(function (res) {
      if (res.status == 200) {
        //刷新左侧树形结构
        this.props.signal.dispatch(this.props.table.id)
      } else {
        this.openNotificationWithIcon('error')
      }
    }.bind(this));
  }

  render() {
    const TableInfoRender = data => {

      var mess = "";
      var mtype = "";

      if (data.status == 31) {
        mess = "新增消息";
        mtype = "success";
      } else if (data.status == 32) {
        mess = "修改消息";
        mtype = "info";
      } else if (data.status == 33) {
        mess = "删除消息";
        mtype = "error";
      } else if (data.status == 42) {
        mess = "受影响";
        mtype = "warning";
      } else {
        return (<Row></Row>);
      }
      return (
        <Row>
          <Col span={24}>
            <Alert
              message={mess}
              description={data.info}
              type={mtype}
            />
          </Col>
          <Col span={24}>
            <Button type="primary" onClick={this.onConfirmClick.bind(this)}>状态确认</Button>
          </Col>
        </Row>
      )
    };

    const TableInfo = TableInfoRender(this.props.table);

    const StatusRender = (text, record) => {
      return (
        <span style={this.getColor(record.status)}>{text}</span>
      )
    }

    const ButtonRender = record => {
      //如果是表整体增删，忽略列的变化
      if (this.props.table.status == 31 || this.props.table.status == 32 || this.props.table.status == 33) {
        return (<div></div>);
      }
      if (record.status != 0) {
        return (
          <div>
            <Button type="primary" size="small" style={{border: 0}}
                    onClick={this.okClick.bind(this, record)}>确认</Button>
          </div>
        )
      } else {
        return (<div></div>);
      }
    }

    const TableTypeRender = (tableType) => {

      if (tableType == 'EXTERNAL_TABLE') {
        return (
          <span>外部表</span>
        );
      } else if (tableType == 'MANAGED_TABLE') {
        return (
          <span>内部表</span>
        );
      } else if (tableType == 'INDEX_TABLE') {
        return (
          <span>索引表</span>
        );
      } else if (tableType == 'VIRTUAL_VIEW') {
        return (
          <span>视图</span>
        );
      } else {
        return null;
      }
    }

    const columns = [{
      title: '列名',
      key: 'name',
      dataIndex: 'name',
      width: '25%',
      render: (text, record) => (
        StatusRender(text, record)
      ),
    }, {
      title: '类型',
      key: 'dataType',
      dataIndex: 'dataType',
      width: '10%',
      render: (text, record) => (
        StatusRender(text, record)
      ),
    }, {
      title: '状态信息',
      key: 'info',
      dataIndex: 'info',
      render: (text, record) => (
        StatusRender(text, record)
      ),
    }, {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '10%',
      render: (record) =>(
        ButtonRender(record)
      )
    }];

    const pagination = {
      total: this.props.columns.length,
      showSizeChanger: true,
    };

    return (
      <div>
        <Row>
          <Col span={24} style={{textAlign: "center"}}>
            <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>表信息</span>
          </Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>表名：</Col>
          <Col span={20}>{this.props.table.name}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>表类型：</Col>
          <Col span={20}>
            {TableTypeRender(this.props.tableMeta.tableType)}
          </Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>管理员：</Col>
          <Col span={16}>{this.props.table.managerName}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>拥有者：</Col>
          <Col span={16}>{this.props.tableMeta.owner}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>表编号：</Col>
          <Col span={20}>{this.props.table.id}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>全路径：</Col>
          <Col span={20}>{this.props.table.path}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>最小文件大小：</Col>
          <Col span={16}>{this.fileSize(this.props.tableMeta.minFileSize)}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>最大文件大小：</Col>
          <Col span={16}>{this.fileSize(this.props.tableMeta.maxFileSize)}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>总文件大小：</Col>
          <Col span={16}>{this.fileSize(this.props.tableMeta.totalFileSize)}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>总文件数：</Col>
          <Col span={16}>{this.props.tableMeta.totalNumberFiles}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>最近更新时间：</Col>
          <Col span={16}>{this.getTime(Number(this.props.tableMeta.lastUpdateTime))}</Col>
        </Row>
        <p></p>
        <Row>
          <Col span={4} style={{textAlign: "right"}}>同步时间：</Col>
          <Col span={20}>{this.getTime(this.props.table.version)}</Col>
        </Row>
        <p></p>
        <p></p>
        <p></p>

        {TableInfo}

        <p></p>
        <p></p>
        <p></p>
        <Table bordered size="middle" columns={columns} pagination={pagination}
               dataSource={this.props.columns}/>
      </div>
    );
  }
}

export default TableInfoComtainer;

